<template>
	<view class="bg-gray">
		<view class="width">
			<scroll-view class="listtype" scroll-x="true"
				@scroll="scroll" 
			>
				<view class="type font16"
				    @click="typeChoose(index,item.id)"
				   :class="index == tabIndex ? 'cur' : ''"
					v-for="(item,index) in type" :key='index'>
					{{ item.name }}
					<image src="https://www.haopengsong.xyz/static/property/arr.png" class="arr"></image>
				</view>
			</scroll-view>
			<orderlist url='/pages/myorder/orderdetail' :list='list'></orderlist>
		</view>
	</view>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存
import orderlist from "@/components/huashuiwan/orderlist.vue";
import { getList } from "@/api/ordermy.js";
export default { 
	data() { 
		return {
			bgimg:'https://www.haopengsong.xyz/static/movie/songdetail.png',
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/movie/songbg.png'}
			],
			orderType:'',
			list:[],
			tabIndex:0,
			type:[
				{id:'',name:'全部'},
				{ id:1, name:'日常三餐' },
				{ id:2, name:'点餐' },
				{ id:3, name:'棋牌室' },
				{ id:4, name:'温泉' },
				{ id:6, name:'乐学院' },
				{ id:5, name:'电影' },
				{ id:8, name:'KTV' },
			]
		};
	},
	components: {
		orderlist
	},
	computed: {
		orderStatus: {
		  get() {
		    return this.$store.state.common.orderStatus
		  },
		}
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		this.getListFun()
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		getListFun(){
			 let data = {
				 orderType:this.orderType
			 }
			 getList(data).then(res=>{
				 this.list = res
			 })
		},
		jump(res){
			uni.switchTab({
				url:'/pages/tabbar/user/my'
			})
		},
		//订单类型选择
		typeChoose(index,type){
			this.tabIndex = index
			this.orderType = type
			this.getListFun()
		}
	}
};
</script>

<style scoped lang="scss">
	.listtype{
		white-space: nowrap;
		.type{
			display: inline-block;
			padding: 0 15px;
			.arr{
				width: 20px;
				height: 5px;
				display: block;
				opacity: 0;
				margin: 8px auto 0;
			}
		}
		.cur{
			.arr{
				opacity: 1;
			}
			color: #499C43;
		}
	}
</style>